<template>
	<div class="card m5 p10 flex_col">
		<label class="flex_center_self">小部件控制</label>
		<div class="flex_row mt5">
			<el-switch @change="onClickChange0" v-model="globalStatus.pasrtStatus.cookingRoomLed" active-text="煮面室LED" />
			<el-switch @change="onClickChange1" class="ml5" v-model="globalStatus.pasrtStatus.cookingRoomFan"
				active-text="煮面室风扇" />
			<el-switch @change="onClickChange2" class="ml5" v-model="globalStatus.pasrtStatus.radiateFan"
				active-text="散热风扇" />
			<el-switch @change="onClickChange3" class="ml5" v-model="globalStatus.pasrtStatus.drainPump"
				active-text="排水泵" />
		</div>
		<div class="flex_row">
			<el-switch @change="onClickChange4" v-model="globalStatus.pasrtStatus.v1" active-text="电磁阀1" />
			<el-switch @change="onClickChange5" class="ml5" v-model="globalStatus.pasrtStatus.v2" active-text="电磁阀2" />
			<el-switch @change="onClickChange6" class="ml5" v-model="globalStatus.pasrtStatus.v3" active-text="电磁阀3" />
			<el-switch @change="onClickChange7" class="ml5" v-model="globalStatus.pasrtStatus.v4" active-text="电磁阀4" />
		</div>
		<div class="flex_row">
			<el-switch @change="onClickChange8" v-model="globalStatus.pasrtStatus.v5" active-text="电磁阀5" />
			<el-switch @change="onClickChange9" class="ml5" v-model="globalStatus.pasrtStatus.v6" active-text="电磁阀6" />
			<el-switch @change="onClickChange10" class="ml5" v-model="globalStatus.pasrtStatus.v7" active-text="电磁阀7" />
			<el-switch @change="onClickChange11" class="ml5" v-model="globalStatus.pasrtStatus.v8" active-text="电磁阀8" />
		</div>
		<div class="flex_row">
			<el-switch @change="onClickChange12" v-model="globalStatus.pasrtStatus.waterHeat" active-text="开水加热器" />
			<el-switch @change="onClickChange13" class="ml5" v-model="globalStatus.pasrtStatus.steamHeat"
				active-text="蒸汽加热器" />
			<el-switch @change="onClickChange14" class="ml5" v-model="globalStatus.pasrtStatus.drawPump"
				active-text="抽水泵" />
		</div>
	</div>
</template>

<script setup lang="ts">

import { globalStatus } from '../service/recv_notify';
import service from '../service/service';
import { run } from '../utils/ui.ts';

async function ctrl(id: number, value: boolean) {
	let v = 1;
	if (value) {
		v = 0;
	}
	await run(async () => {
		await service.partsCtrl(id, v);
	});
}

async function onClickChange0(value: boolean) {
	await ctrl(0, value);
}

async function onClickChange1(value: boolean) {
	await ctrl(1, value);
}

async function onClickChange2(value: boolean) {
	await ctrl(2, value);
}

async function onClickChange3(value: boolean) {
	await ctrl(3, value);
}

async function onClickChange4(value: boolean) {
	await ctrl(4, value);
}

async function onClickChange5(value: boolean) {
	await ctrl(5, value);
}

async function onClickChange6(value: boolean) {
	await ctrl(6, value);
}

async function onClickChange7(value: boolean) {
	await ctrl(7, value);
}

async function onClickChange8(value: boolean) {
	await ctrl(8, value);
}

async function onClickChange9(value: boolean) {
	await ctrl(9, value);
}

async function onClickChange10(value: boolean) {
	await ctrl(10, value);
}

async function onClickChange11(value: boolean) {
	await ctrl(11, value);
}

async function onClickChange12(value: boolean) {
	await ctrl(12, value);
}

async function onClickChange13(value: boolean) {
	await ctrl(13, value);
}

async function onClickChange14(value: boolean) {
	await ctrl(14, value);
}

</script>
